<template>
<!-- 已审核 -->
<div class="content-box">
  <div>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-form class="title cover">
        <h2>已审核</h2>
        <el-form-item>
					<el-button size="small" @click="search" class="el-icon-search">&nbsp;查询</el-button>
				</el-form-item>
      </el-form>
    </el-col>
    <!-- <el-col :span="24" class="SuppC-toolbar">
      <el-form class="title">
        <div>
          <h2>已审核</h2>
        </div>
        <el-form-item class="cover">
          <div class="list-img" @click="search">
            <img class="SuppC-common-icon" src="../../../static/content/images/Common/common-query.png" alt=""/>
            <span>查询</span>
          </div>
        </el-form-item>
      </el-form>
    </el-col>     -->
    <!--列表-->
    <!-- <el-table v-if="alreadyAuditList" :data="alreadyAuditList" highlight-current-row class="indexList" v-loading="loading" element-loading-text="正在加载中">
      <el-table-column label=" " width="40">
          <template slot-scope="scope">
              <span
                :class="{
                  'no-Highlights':scope.row.Highlights===0,
                  'red-Highlights':scope.row.Highlights===1,
                  'orange-Highlights':scope.row.Highlights===2
                }">●</span>
          </template>
      </el-table-column>
      <el-table-column prop="DocType" label="业务类型" width="120">
      </el-table-column>
      <el-table-column prop="DocNO" label="单据编号" width="120">
      </el-table-column>
      <el-table-column prop="DocDate" label="单据日期" width="120">
      </el-table-column>
      <el-table-column prop="Title" label="标题" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="Name" label="提交人" width="120">
      </el-table-column>
      <el-table-column prop="DocStatus" label="单据状态" width="120">
      </el-table-column>
      <el-table-column prop="TotalMoney" label="金额" sortable  width="120">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button-group>
            <el-button size="small" @click="view(scope.$index, scope.row)">查看</el-button>
            <el-button  size="small" @click="checkflow(scope.$index, scope.row)">查看流程</el-button>
            <el-button size="small" v-if="scope.row.AttachmentCount>0" class="icon iconfont icon-attachment"></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table> -->
    <el-table v-if="alreadyAuditList" :data="alreadyAuditList" @row-dblclick="view" @cell-mouse-enter="cellMouseEnterFn" @cell-mouse-leave="cellMouseLeaveFn" highlight-current-row class="indexList" v-loading="loading" element-loading-text="正在加载中" style="100%">
      <el-table-column label=" " width="40">
          <template slot-scope="scope">
              <span
                :class="{
                  'no-Highlights':scope.row.Highlights===0,
                  'red-Highlights':scope.row.Highlights===1,
                  'orange-Highlights':scope.row.Highlights===2
                }">●</span>
          </template>
      </el-table-column>
      <el-table-column prop="DocDate" label="日期">
      </el-table-column>
      <el-table-column prop="DocNO" label="单号">
      </el-table-column>
      <el-table-column prop="DocType" label="业务类型">
      </el-table-column>
      <el-table-column prop="TotalMoney" label="金额" sortable>
      </el-table-column>
      <el-table-column prop="Name" label="申请人">
      </el-table-column>
      <el-table-column prop="Title" label="业务描述" min-width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="DocStatus" label="状态">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button-group>
            <el-button size="small" @click="view(scope.$index, scope.row)">查看</el-button>
            <el-button  size="small" @click="checkflow(scope.$index, scope.row)">查看流程</el-button>
            <el-button size="small" v-if="scope.row.AttachmentCount>0" class="icon iconfont icon-attachment"></el-button>
          </el-button-group> -->
          <div v-if="scope.row.DocNO==mouse_enter_Rcv_DocNO">
          <!-- <div>  -->
            <div class="list-img" @click.stop="checkflow(scope.$index, scope.row)">
              <!-- 查看流程 -->
              <img class="common-icon" src="../../../static/content/images/Common/common-flow.png" alt=""/>
            </div>
            <div  v-if="scope.row.AttachmentCount>0" class="list-img">
              <!-- 附件 -->
              <img class="common-icon" src="../../../static/content/images/Common/common-attach.png" alt=""/>
            </div>
          </div> 
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
		<el-col :span="24" class="toolbar">
		<el-pagination @current-change="changePage" layout="prev, pager, next" :page-size="rows" :current-page="currentPage" :total="total" style="float:right;">
		</el-pagination>
		</el-col>

    <!--流程图-->
    <el-dialog title="流程执行情况" :visible.sync="dialogDocViewVisible" :modal-append-to-body="false" align="center">
      <el-table :data="docView" border header-align="center" v-loading="docViewloading" element-loading-text="拼命刷新中...">
        <el-table-column property="PlanUser" label="操作人"></el-table-column>
        <el-table-column property="StepName" label="步骤名称"></el-table-column>
        <el-table-column property="OpDate" label="时间"></el-table-column>
        <el-table-column property="OpRemark" label="备注"></el-table-column>
      </el-table>
    </el-dialog>
    <!--查询-->
        <el-dialog title="查询" :visible.sync="dialogSearchVisible" :modal-append-to-body="false" size="tiny">
          <el-form :model="Searchform">
          <el-form-item label="金  额 ：" :label-width="formLabelWidth">
            <el-input v-model.number.trim="Searchform.StartMoney" auto-complete="off" style="width:120px;"></el-input>
            至&nbsp;<el-input v-model.number.trim="Searchform.EndMoney" auto-complete="off" style="width:120px;"></el-input>
          </el-form-item>
          <el-form-item label="日  期 ：" :label-width="formLabelWidth">
            <el-date-picker type="date" v-model="Searchform.StartDate" style="width:120px;" placeholder="选择日期"></el-date-picker>
            至&nbsp;<el-date-picker type="date" v-model="Searchform.EndDate" style="width:120px;" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="业务类型 ：" :label-width="formLabelWidth">
            <el-select v-model="Searchform.Type" style="width:262px;" placeholder="请选择">
            <el-option value="" label="全部">全部</el-option>
            <el-option
              v-for="item in TypeOptions"
              :key="item.Code"
              :label="item.Name"
              :value="item.Code">
            </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单  号 ：" :label-width="formLabelWidth">
            <el-input v-model="Searchform.DocNo" style="width:262px;"></el-input>
          </el-form-item>
          <el-form-item label="标  题 ：" :label-width="formLabelWidth">
            <el-input v-model="Searchform.Title" style="width:262px;"></el-input>
          </el-form-item>
          <el-form-item label="提交人 ：" :label-width="formLabelWidth">
            <el-select v-model="Searchform.Name"  filterable style="width:262px;" placeholder="请选择">
            <el-option value="" label="全部">全部</el-option>
            <el-option
              v-for="item in EmployeeList"
              :key="item.UserID"
              :label="item.RealName"
              :value="item.UserID">
            </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状 态 ：" :label-width="formLabelWidth">
            <el-select v-model="Searchform.DocStatus" style="width:262px;" placeholder="请选择">
            <el-option value="" label="全部">全部</el-option>
            <el-option
              v-for="item in StatusOptions"
              :key="item.Code"
              :label="item.Name"
              :value="item.Code">
            </el-option>
            </el-select>
          </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer cover">
          <el-button size="small" @click="Reset">重 置</el-button>
          <el-button size="small" @click="Query">确 定</el-button>
          </div>
        </el-dialog>
  </div>
</div>
</template>
<script>
import moment from 'moment';
export default {
  name: "alreadyAudit",
  data() {
    return {
      total: 0, //数据总数
			rows: 100, //每页显示多少条
			currentPage: 1,//当前页数
      alreadyAuditList: [],
      loading: true, //显示loading
      key: "",
      docView: [],
      docViewloading: true, //查看流程Loading
      dialogDocViewVisible: false,
      dialogSearchVisible:false,//查询窗口
			formLabelWidth:'120px',
      StatusOptions:[],
      EmployeeList:[],//提交人
			TypeOptions:[],
			Searchform: {
				StartMoney:"",
				EndMoney:"",
				StartDate:'',
				Type:'',
				EndDate:'',
				DocNo:'',
				Title:'',
        DocStatus:'',
        Name:''
      },
      mouse_enter_Rcv_DocNO:""
    };
  },
  methods: {
    cellMouseEnterFn(...arr){//鼠标移速单元格触发事件
			this.mouse_enter_Rcv_DocNO=arr[0].DocNO
		},
		cellMouseLeaveFn(){
			this.mouse_enter_Rcv_DocNO=""
		},
    changePage(page) {//当前页数
			this.currentPage = page;
			this.getList();
		},
    // 获取列表
    async getList() {
			this.loading = true;
			const res = await axios.post('getAuditAndApplyList', {
        type:1,//=0 查询待审核  =1 查询已审核  =2 已发起  =3 未发起
				page:this.currentPage,//当前一页
				rows:this.rows,//显示5000条
			})
			this.total = res.total;//总页数
			this.alreadyAuditList = res.rows;		
			this.loading = false;
    },
    search(){
			this.dialogSearchVisible = true;
			this.getStatusList();
      this.getTypes();
      this.getStaffListEmployee();
    },
    //提交人
		async getStaffListEmployee(){
      this.EmployeeList = await axios.get('Fu_GetStaffList');
      console.log(this.EmployeeList,'EmployeeList');
    },
		async getStatusList(){
			this.StatusOptions = await axios.get('getStatusList');
		},
		async getTypes(){
			this.TypeOptions = await axios.get('getTypeOptions');
    },
    /*
		*  查询 
		*/
		async Query(){
    if(new Date(this.Searchform.StartDate)>new Date(this.Searchform.EndDate)){
			console.log(new Date(this.Searchform.StartDate),'this.Searchform.StartDate')
			console.log(new Date(this.Searchform.EndDate),'this.Searchform.EndDate')
			this.$message({
			message: '开始日期必须小于或者等于结束时期！',
			type: 'warning',
			duration: 1200
			});
			return;
		}else if(this.Searchform.StartMoney>this.Searchform.EndMoney){
			this.$message({
			message: '开始金额必须小于或者等于结束金额！',
			type: 'warning',
			duration: 1200
			});
			return;
		}
		this.dialogSearchVisible = false;
		console.log(this.Searchform.StartDate ? moment(this.Searchform.StartDate).format('L') : '','1');
		console.log(this.Searchform.EndDate ? moment(this.Searchform.EndDate).add(1,"d").format('L') : '','2');
		let filterName = {
			"groupOp": "AND",
			"rules": [{
			"field": "DocNO",
			"dataType": "string",
			"op": "cn",
			"data": this.Searchform.DocNo || ''
			}, {
			"field": "Title",
			"dataType": "string",
			"op": "cn",
			"data": this.Searchform.Title || ''
			},{
			"field": "Type",
			"dataType": "numeric",
			"op": "eq",
			"data": this.Searchform.Type || ''
			},{
			"field": "DocStatus2",
			"dataType": "string",
			"op": "eq",
			"data": this.Searchform.DocStatus || ''
			}, {
      "field": "CreateBy",
      "dataType": "string",
      "op": "eq",
      "data": this.Searchform.Name || ''
      }, {
			"field": "TotalMoney",
			"dataType": "numeric",
			"op": "ge",
			"data": this.Searchform.StartMoney || ''
			}, {
			"field": "TotalMoney",
			"dataType": "numeric",
			"op": "le",
			"data": this.Searchform.EndMoney || ''
			}, {
			"field": "Date",
			"dataType": "string",
			"op": "ge",
			"data": this.Searchform.StartDate ? moment(this.Searchform.StartDate).format('L') : ''
			}, {
			"field": "Date",
			"dataType": "string",
			"op": "le",
			"data": this.Searchform.EndDate ? moment(this.Searchform.EndDate).add(1,"d").format('L') : ''
			}],
			"groups": []
		}
		this.loading = true;
		const res = await axios.post("getAuditAndApplyList", { 
      type:1,
			filter:JSON.stringify(filterName),
			page:this.currentPage,
			rows:this.rows,
		});
		this.total = res.total;//总页数
		this.alreadyAuditList = res.rows;
		this.loading = false;
		},
		Reset(){
			this.Searchform = {
				StartMoney:"",
				EndMoney:"",
				StartDate:'',
				EndDate:'',
				DocNo:'',
				Type:'',
				Title:'',
				DocStatus:''
			}
		},
    /* 流程图 */
    async checkflow(index, rows) {
      this.dialogDocViewVisible = true;
      this.docViewloading = true;
      this.docView = await axios.get("checkFlow", {
          DocNo: rows.DocNO,
          DocType: rows.Type
      })    
      this.docViewloading = false;
    },
    // view(index, row) {
    view(...arr){
			let row=arr[0];      
      if (row.DocType == "借款单") {
        this.$router.push({
          path: "/borrowMoney?key=" + row.DocNO,
          query: {
            showNum: 2
          }
        });
      } else if (row.DocType == "还款单") {
        this.$router.push({
          path: "/refundMoney?key=" + row.DocNO,
          query: {
            showNum: 2
          }
        });
      } else if (row.DocType == "报销单") {
        this.$router.push({
          path: "/Expense?key=" + row.DocNO,
          query: {
            showNum: 2
          }
        });
      } else if (row.DocType == "出纳付款单") {
        this.$router.push({
          path: "/HistoryTable?key=" + row.DocNO,
          query: {
            showNum: 2,
            DocType: 401
          }
        });
      } else if (row.DocType == "出纳收款单") {
        this.$router.push({
          path: "/HistoryTable?key=" + row.DocNO,
          query: {
            showNum: 2,
            DocType: 402
          }
        });
      } else if (row.DocType == "收入确认单") {
        this.$router.push({
          path: "/Income?key=" + row.DocNO,
          query: {
            showNum: 2
          }
        });
      } else if (row.DocType == "预算调整单") {
        this.$router.push({
          path: "/budgetAdjust?key=" + row.DocNO,
          query: {
            showNum: 2,
          }
        });
      }
    }
  },
  mounted() {
    this.getList();
  }
};
</script>
<style scoped lang="scss">
@import "../../common/css/index.css";
.toolbar {
  line-height: 45px;
  height: 45px;
  padding: 0 0 0 10px;
}

.toolbar h2 {
  line-height: 36px;
  margin: 0 10px 0 0;
}
</style>